<template>
	<div class="content" v-loading="mainLoading">
		<h2><i class="iconfont icon-activity_add"></i>
			<span v-if="params.activity_id">修改活动</span>
			<span v-else>添加活动</span>
		</h2>
		<div class="content-wrap">
			<!--填写活动名称-->
			<div class="ct-list">
				<div class="ct-list__title">活动名称</div>
				<div class="ct-list__field">
					<el-input size="small" v-model="params.activity_title"></el-input>
				</div>
			</div>
			<!--选择活动开始和结束的日期-->
			<div class="ct-list">
				<div class="ct-list__title">开始和结束时间选择</div>
				<div class="ct-list__field">
					<el-date-picker
					    v-model="params.activeTimes"
					    type="daterange"
					    range-separator="至"
					    start-placeholder="开始日期"
					    end-placeholder="结束日期">
				    </el-date-picker>
				</div>
			</div>
			<!--上传活动图片-->
			<div class="ct-list">
				<div class="ct-list__title">
					上传活动主图
					<span class="ct-list__title--tip">(请上传200*200的图片)</span>
				</div>
				<div class="ct-list__upload">
					<s-upload-pictrue :limit="1" :size="5" :fileList="main_imgs" @getImgIds="handleImgMain"></s-upload-pictrue>
				</div>
			</div>
			<div class="ct-list">
				<div class="ct-list__title">
					上传活动详情图
					<span class="ct-list__title--tip">(请上传600*200的图片)</span>
				</div>
				<div class="ct-list__upload">
					<s-upload-pictrue :limit="1" :size="5" :fileList="detail_imgs" @getImgIds="handleImgDetail"></s-upload-pictrue>
				</div>
			</div>
			<!--活动放置位置-->
			<div class="ct-list">
				<div class="ct-list__title">活动放置位置</div>
				<el-select v-model="params.activity_loc">
					<el-option label="顶部活动列表" :value="1"></el-option>
					<el-option label="中部活动列表" :value="2"></el-option>
				</el-select>
			</div>
			<!--选择活动商品-->
			<div class="ct-list">
				<div class="ct-list__title">选择活动商品</div>
				<s-wait-goods-upload :limit="999" :batch="true"></s-wait-goods-upload>
			</div>
			<!--提交活动-->
			<div class="submit">
				<el-button type="primary" @click="addActivity">
					<span v-if="params.activity_id">确认修改</span>
					<span v-else>确认添加</span>
				</el-button>
			</div>
		</div>
	</div>
</template>

<script>
	import uploadPicture from "../../../components/upload_picture/upload_picture.vue"
	import waitGoodsUpload from "../../../components/wait_goods_upload/wait_goods_upload.vue"
	export default {
		components: {
			"s-upload-pictrue": uploadPicture,
			sWaitGoodsUpload: waitGoodsUpload
		},
		data() {
			return {
				//========活动基本信息========//
				params: {
					activity_title: "",					//活动名称
					activeTimes: [],					//活动开始和结束的日期
					main_img_id: "",// 主图
					detail_img_ids: ""//详情图
				},	
				main_imgs: [],
				detail_imgs: [],
				//========其他参数========//
				mainLoading: false,						//提交活动的时候的小圆圈
				loading: true 							//加载小圆圈触发变量
			};
		},
		created() {
			if(this.$route.query.id) {
				this.params.activity_id = this.$route.query.id; 
				this.loadActivity();
			}
		},
		methods: {
			handleImgMain(ids) {
				this.params.main_img_id = ids;
			},
			handleImgDetail(ids) {
				this.params.detail_img_ids = ids;
			},
			loadActivity() {
				var url = `${this.url}/activity/activity_get_detail.action`;
				var params = {
					activity_id: this.$route.query.id
				};
				this.$http.get(url,{ params }).then((res, err) => {
					if( res.data.success ) {
						var r = res.data.result;
						this.params.activity_id = r.activity_id;
						this.params.activity_title = r.activity_title;
						this.params.activeTimes.push(new Date(r.start_time));
						this.params.activeTimes.push(new Date(r.end_time));
						if(r.mainimg) {
							this.params.main_img_id = r.mainimg.image_resource_id;
							this.main_imgs = [{
								name: '',
								url: r.mainimg.thump + "400"
							}];
						}
						var $this = this;
						if(r.detailimg) {
							r.detailimg.forEach(function(row, index, rows) {
								if(index > 0)
									$this.params.detail_img_ids += ",";
								$this.params.detail_img_ids += row.image_resource_id;
								$this.detail_imgs.push({
									name: '',
									url: row.thump + "400"
								});
							});
						}
						r.commodities.forEach((val,index)=>{
							this.$store.commit({
								type: "saveGoods/set",
								commodity_id: val.commodity_id,
								commodity_no: val.commodity_no,
								status: 1,
								commodity_name: val.commodity_name
							});
						});

					}else {
						this.loading = false;
						this.$message({
							type: "error",
							message: res.data.result.errmsg
						});
					}
				});
				
			},
			//=======================================发送一次完整的活动给服务器================================//
			addActivity() {
				var goods = [];
				for(var item in this.$store.state.saveGoods.goodsStatus) {
					if (this.$store.state.saveGoods.goodsStatus[item].status === 1) {
						goods.push(item)
					}
				}
				goods = goods.join(",");	
				if( this.params.activeTimes.length === 0 ) {
					this.$message({
						message: "请选择活动时间",
						type: "warning"
					});
					return;
				}else if( this.params.activity_title.trim().length === 0 ) {
					this.$message({
						message: "请填写活动名称",
						type: "warning"
					});
					return;
				}else if ( !this.params.main_img_id ) {
					this.$message({
						message: "请上传活动主图",
						type: "warning"
					});
					return;
				}else if ( !this.params.detail_img_ids ) {
					this.$message({
						message: "请上传活动详情图",
						type: "warning"
					});
					return;
				}else if ( !goods ) {
					this.$message({
						message: "请至少上传一个商品",
						type: "warning"
					});
					return;
				}
				var params = {
					activity_id: this.params.activity_id,
					activity_title: this.params.activity_title,
					start_time: this.params.activeTimes[0].getTime(),
					end_time: this.params.activeTimes[1].getTime(),
					commodityids: goods,
					main_img_id: this.params.main_img_id,
					detail_img_ids: this.params.detail_img_ids
				};
				this.mainLoading = true;
				var url;
				var tip;
				if(params.activity_id) {
					url = `${this.url}/activity/activity_update.action`;
					tip = "修改成功";
				} else {
					url = `${this.url}/activity/activity_create.action`;
					tip = "添加成功";
				}
				this.$http.get(url, { params }).then((res) => {
					if( res.data.success ) {
						this.$message({
							type: "success",
							message: tip
						});
						this.mainLoading = false;
						this.$router.push("/admin/all_active");
					}else {
						this.mainLoading = false;
						this.$message({
							type: "error",
							message: res.data.result.errmsg
						});
					}
				});
			}

		}
	}
</script>

<style lang="scss" scoped>
	/*每一项的基本信息填写*/
	.ct-list__title {
		color: #008489;
		font-size: 16px;
		margin: 1rem 0;
	}
	.ct-list__title--tip {
		color: #f60;
		font-size: 14px;
	}
	.ct-list__field {
		width: 100%;
	}
	/*提交按钮*/
	.submit {
		text-align: center;
		margin-top: 4rem;
	}
</style>
